<a href='https://github.com/angular/angular.js/edit/v1.6.x/docs/content/error/$location/nobase.ngdoc?message=docs(error%2Fnobase)%3A%20describe%20your%20change...' class='improve-docs btn btn-primary'><i class="glyphicon glyphicon-edit">&nbsp;</i>Improve this Doc</a>


<h1>Error: $location:nobase
  <div><span class='hint'>$location in HTML5 mode requires a &lt;base&gt; tag to be present!</span></div>
</h1>

<div>
    <pre class="minerr-errmsg" error-display="$location in HTML5 mode requires a <base> tag to be present!">$location in HTML5 mode requires a <base> tag to be present!</pre>
</div>

<h2>Description</h2>
<div class="description">
  <p>If you configure <a href="api/ng/service/$location"><code>$location</code></a> to use
<a href="api/ng/provider/$locationProvider"><code>html5Mode</code></a> (<code>history.pushState</code>), you need to specify the base URL for the application with a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base"><code>&lt;base href=&quot;&quot;&gt;</code></a> tag or configure
<code>$locationProvider</code> to not require a base tag by passing a definition object with
<code>requireBase:false</code> to <code>$locationProvider.html5Mode()</code>:</p>
<pre><code class="lang-javascript">$locationProvider.html5Mode({
  enabled: true,
  requireBase: false
});
</code></pre>
<p>Note that removing the requirement for a <code>&lt;base&gt;</code> tag will have adverse side effects when resolving
relative paths with <code>$location</code> in IE9.</p>
<p>The base URL is then used to resolve all relative URLs throughout the application regardless of the
entry point into the app.</p>
<p>If you are deploying your app into the root context (e.g. <code>https://myapp.com/</code>), set the base URL to <code>/</code>:</p>
<pre><code class="lang-html">&lt;head&gt;
  &lt;base href=&quot;/&quot;&gt;
  ...
&lt;/head&gt;
</code></pre>
<p>If you are deploying your app into a sub-context (e.g. <code>https://myapp.com/subapp/</code>), set the base URL to the
URL of the subcontext:</p>
<pre><code class="lang-html">&lt;head&gt;
  &lt;base href=&quot;/subapp/&quot;&gt;
  ...
&lt;/head&gt;
</code></pre>
<p>Before Angular 1.3 we didn&#39;t have this hard requirement and it was easy to write apps that worked
when deployed in the root context but were broken when moved to a sub-context because in the
sub-context all absolute urls would resolve to the root context of the app. To prevent this,
use relative URLs throughout your app:</p>
<pre><code class="lang-html">&lt;!-- wrong: --&gt;
&lt;a href=&quot;/userProfile&quot;&gt;User Profile&lt;/a&gt;


&lt;!-- correct: --&gt;
&lt;a href=&quot;userProfile&quot;&gt;User Profile&lt;/a&gt;
</code></pre>
<p>Additionally, if you want to support <a href="http://caniuse.com/#feat=history">browsers that don&#39;t have the <code>history.pushState</code>
API</a>, the fallback mechanism provided by <code>$location</code>
won&#39;t work well without specifying the base url of the application.</p>
<p>In order to make it easier to migrate from hashbang mode to html5 mode, we require that the base
URL is always specified when <code>$location</code>&#39;s <code>html5mode</code> is enabled.</p>

</div>


